<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/admin/css/login.css">
<script src="/layui/layui.js"></script>
</head>

<body id="login">
	<div class="login">
		<h2>xxxxxxxx</h2>
		<form class="layui-form" method="post" target="_blank" action="">
			<div class="layui-form-item">
				<input type="username" name="user" placeholder="账号"
					class="layui-input"> <i class="layui-icon input-icon">&#xe66f;</i>
			</div>
			<div class="layui-form-item">
				<input type="password" name="pwd" placeholder="密码"
					class="layui-input"> <i class="layui-icon input-icon">&#xe673;</i>
			</div>
			<div class="layui-form-item">
				<div class="layui-form" lay-filter="myDiv">
					<select name="usertype" id="type" lay-filter="mySelect">
						<option value="student">&nbsp;&nbsp;学生</option>
						<option value="teacher">&nbsp;&nbsp;授课教师</option>
						<option value="professionor">&nbsp;&nbsp;实训负责人</option>
						<option value="admin">&nbsp;&nbsp;系统管理员</option>
					</select>
				</div>
				<i class="layui-icon input-icon">&#xe613;</i>
			</div>
			<div class="layui-form-item">
				<input type="checkbox" name="box" lay-skin="primary" title="记住密码"
					checked="">
			</div>
			<div class="layui-form-item">
				<button style="width: 100%" class="layui-btn" lay-submit
					lay-filter="login">立即登录</button>

			</div>
		</form>

		<script>
			layui.use('form', function() {
				var form = layui.form, layer = layui.layer, $ = layui.jquery;

				form.on('submit(login)', function(data) {
					layer.load({
						shade : 0.5,
						time : 0,
					});

					if(!data.field.user || data.field.user === ""){
						var index = layer.load();
						layer.close(index);
						layer.alert('账号不能为空！！！', function(index) {
							//do something
							layer.close(index);
						});
						return false;
					}
					if(!/^[0-9]{5,16}\w*$/.test(data.field.user)){
						var index = layer.load();
						layer.close(index);
						layer.alert('账号只能为数字，长度为5~17位！', function(index) {
							//do something
							layer.close(index);
						});
						return false;
					}
					
					if(!data.field.pwd || data.field.pwd === ""){
						var index = layer.load();
						layer.close(index);
						layer.alert('密码不能为空！！！', function(index) {
							//do something
							layer.close(index);
						});
						return false;
					}
					if(!/^[a-zA-Z0-9_]{5,16}\w*$/.test(data.field.pwd)){
						var index = layer.load();
						layer.close(index);
						layer.alert('密码长度为5~17位，且以字母、数字、下划线随意组合！', function(index) {
							//do something
							layer.close(index);
						});
						return false;
					}
					setTimeout(function() {
						//ajax提交信息
						$.ajax({
							type : "get",
							async : false,
							url : "/user/login",// 请求发送到LoginServlet处
							data : data.field,
							dataType : 'json',
							success : function(msg) {
								var index = layer.load();
								if ("Success" === msg.message) {
									layer.close(index);
									layer.alert('登录成功！！！', function(index) {
										//do something
										window.location.href = "/user/index";
										layer.close(index);
									});
									
								} else if ("PasswordError" === msg.message) {
									layer.close(index);
									layer.alert('密码错误！！！', function(index) {
										//do something
										layer.close(index);
									});
								} else if ("UserUnexit" === msg.message) {
									layer.close(index);
									layer.alert('账户不存在！！！', function(index) {
										//do something
										layer.close(index);
									});
								}
							},
							error : function(msg) {
								// 请求失败时执行该函数
								var index = layer.load();
								layer.close(index);
								layer.alert('请求数据失败！！！', function(index) {
									//do something
									layer.close(index);
								});
							}
						});
					}, 1000)

					return false;
				});
			});
		</script>
	</div>
</body>

</html>